<template>
    <div class="top_input flex">
        <div class="top_search"></div>
        <div class="input_box">
            <van-icon name="search" />
            搜索商品，共123456件
        </div>
    </div>
    <!-- 分类搜索 -->
    <div class="nav_list">
        <van-tabs v-model:active="active" scrollspy sticky>
            <van-tab v-for="item in topNavlist" :key="item.id">
                {{ item.name }}
            </van-tab>
          </van-tabs>
        <!-- <span v-for="item in topNavlist" :key="item.id">{{ item.name }}</span> -->
    </div>
    <!-- 轮播 图区域 -->
    <div class="top_swiper">
        <van-swipe class="my-swipe" lazy-render :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in focusList" :key="item.id">
                <img :src="item.picUrl" @click="goDetail">
            </van-swipe-item>
        </van-swipe>
    </div>
    <div>我是测试</div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.top_input {
    width: 100%;
    height: 44px;
    background-color: #fff;
    align-items: center;
    justify-content: center;
}

//top搜索提示--精灵图
.top_search {
    width: 69px;
    height: 20px;
    background-image: url(@/assets/yanxuan.png);
    vertical-align: middle;
    background-size: 4.3rem 4.3rem;
    background-position: 3rem 4.8rem;
    display: inline-block;
    margin-right: 0.2rem;

}

//分类搜索列表
.nav_list {
    width: 100%;
    height: 30px;
    background-color: #fff;
}

.nav_list {
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    font-size: 12px;
    line-height: .6rem;
    text-align: center;

    span {
        margin: 0 10px;

    }
}

.input_box {
    width: 266px;
    height: 28px;
    background-color: #ededed;
    font-size: 14px;
    border-radius: 5px;
    text-align: center;
    line-height: 28px;
}

//轮播图盒子位置
.top_swiper {
    width: 375px;
    height: 185px;

    img {
        width: 100%;
        height: 100%;
    }
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;

    text-align: center;
}
</style>